UNIVERSITY  OF  MICHIGAN  **  SCHOOL  OF  INFORMATION 

SI  539:  Design  of  Complex  Web  Sites 

Assignment  1 - HTML 


Due  Date:  Tuesday  January  15,  2008  at  9PM 

Overview 

The  purpose  of  this  assignment  is  to  develop  three  web  pages  in  HTML  and  link  them  together.  The 
web  pages  must  be  valid  XHTML  and  you  must  test  your  web  pages  using  the  W3C  web  page 
validator. 

Work  our  way  through  the  samples  in  the  book  so  that  you  have  three  pages  similar  to  Figure  2.2.1 
in  the  book. 


Bubbl 


-h,v, 


Bubble) 

Dr,  mg  ckib  fov  th 


Welconi 


• non 


About  Us 

BubbltfL'ndrt  ii  a 
tnpi  in  th*  utmni? 
we«kntdi  a 
n ex  \ ofl(  efli  a tr 


Although  or?  bated  ai  tb 


BubbleUnder.com 


[Xvins  club  tot  thi 


Contact  Us 

To  find  out  tnote.  o 


*t  art*,  rv 


■4  rucl  V 


You  can  put  any  content  that  you  like  in  the  pages  (i.e.  you  do  not  have  to  type  in  the  exact  content 
or  image  from  the  book).  Here  is  your  checklist  for  what  must  be  done  on  your  pages: 

• Your  pages  should  use  the  same  DOCTPE  as  used  in  the  book.  Your  pages  should  be  validated 
using  W3C  at  http://validator.w3.org/ 

• Your  pages  should  have  a title  tag  and  a meta  tag  for  content- type  as  shown  in  the  book 

• You  should  have  three  pages  and  have  navigation  between  the  pages.  Your  main/starting 
page  should  be  named  index.html.  You  should  use  an  unordered  list  (<ul>  and  <li>)  for  your 
navigation. 

• You  should  have  an  image  on  one  page 

• You  should  have  a mailto  on  one  page. 

• Add  all  of  the  div  tags  from  the  examples  in  the  book  - use  exactly  the  same  divs  and  same 
div  nesting  structure  from  the  examples  in  the  book. 


You  can  easily  validate  your  pages  by  pasting  the  HTML  into  the  validator  under  the  tab  titled 
"Validate  by  Direct  Input".  You  need  to  validate  all  three  pages  - but  only  hand  in  one  screen  shot 
from  the  validator  like  the  image  below: 


W3C 


Markup  Validation  Service 

Check  the  markup  (HTML,  XHTML,  ...)  of  Web  documents 


Jump  To:  Congratulations  • Icons 


This  Page  Is  Valid  XHTML  1 .0  Strict! 


Result:  Passed  validation 


<! DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN" 

" http : //www . w3 . o r g/TR/xhtml 1/DTD/xhtml 1- s t r 1 ct . dt d " > 
chtml  xmlns=" http : //www . w3 . org/1999/xhtml "> 

<head> 

<title>Bubble  Under  - The  diving  club  for  the  south-west  UK</title> 

0 

Source : 

cmeta  http-equiv="Content-Type"  content="text/html ; charset=utf-8"  /> 
</head> 

<body> 

<div  id=''header"> 

▲ 

<div  id=,’sitebranding',> 
<hl>BubbleUnder.com</hl> 

▼ 

</div> 

Encoding  : utf-8 


(detect  automatically) 


Doctype  : XHTML  1 .0  Strict  (detect  automatically)  J 1 

Root  Element:  html 

Root  Namespace:  httpy/www.w3.ora/1 999/xhtml 


Hand  In 

You  should  hand  your  assignment  in  using  the  CTools  Assignment  Tool.  You  should  hand  in  the 
following: 

A screenshot  in  JPG  of  each  of  your  pages 


A screenshot  in  JPG  of  one  of  your  pages  validating  at  the  W3C  validator 


